<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="学号" prop="studentId">
        <el-input
          v-model="queryParams.studentId"
          placeholder="请输入学号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="面试日期" prop="intvDate">
        <el-date-picker clearable
          v-model="queryParams.intvDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择面试日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="面试状态" prop="intvState">
        <el-select v-model="queryParams.intvState" placeholder="请选择面试状态" type="date" style="width: 200px" clearable>
          <el-option label="未面试" value="未面试"></el-option>
          <el-option label="已面试" value="已面试"></el-option>
          <el-option label="未通过" value="未通过"></el-option>
          <el-option label="已通过" value="已通过"></el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item label="面试分数" prop="intvScore">-->
<!--        <el-input-->
<!--          v-model="queryParams.intvScore"-->
<!--          placeholder="请输入面试分数"-->
<!--          clearable-->
<!--          @keyup.enter="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
        >删除</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="warning"-->
<!--          plain-->
<!--          icon="Download"-->
<!--          @click="handleExport"-->
<!--          v-hasPermi="['system:InterviewManager:export']"-->
<!--        >导出</el-button>-->
<!--      </el-col>-->
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="interviewList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" width="60" align="center">
        <template #default="scope">
          <span>{{ (page.pageNum - 1) * page.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学号" align="center" prop="studentId" />
      <el-table-column label="面试日期" align="center" prop="intvDate" width="180">
        <template #default="scope">
          <span>{{scope.row.intvDate}}</span>
        </template>
      </el-table-column>
      <el-table-column label="面试时间" align="center" prop="intvTime" width="180">
        <template #default="scope">
          <span>{{scope.row.intvTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="面试状态" align="center" prop="intvState" />
      <el-table-column label="面试分数" align="center" prop="intvScore" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="handleDetailed(scope.row)" ></el-button>
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" ></el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 30, 40,100,500,1000]"
      @size-change="getList"
      @current-change="getList"
      class="custom-pagination"
    />

    <!-- 添加或修改面试信息对话框 -->
    <el-dialog :title="title" v-model="open" width="400px" append-to-body>
      <el-form ref="interviewRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="学号" prop="studentId">
          <el-input v-model="form.studentId" placeholder="请输入学号" style="width: 220px" />
        </el-form-item>
        <el-form-item label="面试日期" prop="intvDate">
          <el-date-picker clearable
            v-model="form.intvDate"
            type="date" style="width: 220px"
            value-format="YYYY-MM-DD"
            placeholder="请选择面试日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="面试时间" prop="intvTime">
          <el-time-picker clearable
            v-model="form.intvTime"
            type="date" style="width: 220px"
            value-format="HH:mm:ss"
            placeholder="请选择面试时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="面试状态" prop="intvState">
          <el-select v-model="form.intvState" placeholder="请选择面试状态" style="width: 220px">
            <el-option label="未面试" value="未面试"></el-option>
            <el-option label="已面试" value="已面试"></el-option>
            <el-option label="未通过" value="未通过"></el-option>
            <el-option label="已通过" value="已通过"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="面试分数" prop="intvScore">
          <el-input v-model="form.intvScore" placeholder="请输入面试分数" style="width: 220px"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 用户详细信息对话框 -->
    <el-dialog :title="title" v-model="openDetail" width="500px" append-to-body>
      <el-form-item label="姓名:" prop="stuName" label-width="80px">{{userInfo.stuName}}</el-form-item>
      <el-form-item label="性别:" prop="stuSex" label-width="80px">{{userInfo.stuSex}}</el-form-item>
      <el-form-item label="邮箱:" prop="email" label-width="80px">{{userInfo.email}}</el-form-item>
      <el-form-item label="电话:" prop="stuPhone" label-width="80px">{{userInfo.stuPhone}}</el-form-item>
      <el-form-item label="学号:" prop="studentId" label-width="80px">{{userInfo.studentId}}</el-form-item>
      <el-form-item label="角色:" prop="sign" label-width="80px">
        {{ userInfo.sign !== null ? getRoleText(userInfo.sign) : '未知角色' }}
      </el-form-item>
      <el-form-item label="年级:" prop="stuGrade" label-width="80px">{{userInfo.stuGrade}}</el-form-item>
      <el-form-item label="学院:" prop="stuDepartment" label-width="80px">{{userInfo.stuDepartment}}</el-form-item>
      <el-form-item label="专业:" prop="stuSpeciality" label-width="80px">{{userInfo.stuSpeciality}}</el-form-item>
      <el-form-item label="班级:" prop="stuClass" label-width="80px">{{userInfo.stuClass}}</el-form-item>
      <!--个人荣誉-->
      <div v-if="loading" class="loading">加载中...</div>
      <div v-else class="item-list">
        <div v-for="(item, index) in userInfo.contest" :key="index" class="item-card">
          <div class="item-column">
            <span class="item-label">竞赛名称:</span>
            <span class="item-value">{{ item.conName }}</span>
          </div>
          <div class="item-column">
            <span class="item-label">获奖时间:</span>
            <span class="item-value">{{ item.conTime }}</span>
          </div>
        </div>
      </div>
      <el-form-item label="技术方向:" prop="stuSkill" label-width="80px">{{userInfo.stuSkill}}</el-form-item>
      <el-form-item label="技术栈:" prop="stuSkillStack" label-width="80px">
        <div style="width: 100%">{{userInfo.stuSkillStack}}</div>
      </el-form-item>
      <el-form-item label="意向:" prop="stuIntention" label-width="80px">
        <div style="width: 100%">{{userInfo.stuIntention}}</div>
      </el-form-item>
      <el-form-item label="学生照片" prop="stuImage">
        <img v-if="imgSrc!=null" :src="imgSrc" alt="" width="100px">
      </el-form-item>
    </el-dialog>
  </div>
</template>

<script setup name="Interview" lang="ts">
import { listInterview, getInterview, delInterview, addInterview, updateInterview } from "@/apis/system/interview";
import { ref, reactive, toRefs, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import {getUserById} from "@/apis/security/user";
import {getImage} from "@/apis/security/image";

const { proxy } = getCurrentInstance() as { proxy:any};

const interviewList = ref([]);
const open = ref(false);
const openDetail = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<number[]>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {
    intvId: null,
    studentId: null,
    intvDate: null,
    intvTime: null,
    intvState: null,
    intvScore: null
  },
  userInfo:{
    studentId: null,
    email: null,
    password: '',
    sign: null, // 确保有默认值
    className: null,
    stuName: null,
    stuSex: null,
    stuDepartment: null,
    stuClass: null,
    stuSpeciality: null,
    stuGrade: null,
    stuPhone: null,
    stuImage: null,
    stuSkill: null,
    stuSkillStack: null,
    stuIntention: null,
    createTime: null,
    updateTime: null,
    contest: [
      {
        conName: null,
        conTime: null
      }
    ]
  },
  page: {
    pageNum: 1,
    pageSize: 10
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    studentId: null,
    intvDate: null,
    intvTime: null,
    intvState: null,
    intvScore: null,
  },
  rules: {
    studentId: [
      { required: true, message: "学号不能为空", trigger: "blur" }
    ],
    intvDate: [
      { required: true, message: "面试日期不能为空", trigger: "blur" }
    ],
    intvTime: [
      { required: true, message: "面试时间不能为空", trigger: "blur" }
    ],
    intvState: [
      { required: true, message: "面试状态 未面试，已面试，未通过，已通过不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules ,page,userInfo} = toRefs(data);

/** 查询面试信息列表 */
function getList() {
  loading.value = true;
  listInterview(queryParams.value).then(response => {
    if (response.data.code === 200){
      interviewList.value = response.data.data.records;
      total.value = response.data.data.total;
      page.value.pageNum = queryParams.value.pageNum;
      page.value.pageSize = queryParams.value.pageSize;
    }else {
      ElMessage({
        message: response.data.msg,
        type: 'error'
      });
    }
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  openDetail.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    intvId: null,
    studentId: null,
    intvDate: null,
    intvTime: null,
    intvState: null,
    intvScore: null,
  };
}
const imgSrc = ref()
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    studentId: null,
    intvDate: null,
    intvTime: null,
    intvState: null,
    intvScore: null,
  };
  handleQuery();
}
function handleDetailed(row: any) {
  reset();
  const _studentId = row.studentId || ids.value;
  getUserById(_studentId).then(response => {
    if(response.data.code === 200){
      userInfo.value = response.data.data;
      openDetail.value = true;
      title.value = "用户详细信息";
      if (userInfo.value.stuImage !== null) {
        getImage(userInfo.value.stuImage).then(res => {
          if(imgSrc.value!=null){
            window.URL.revokeObjectURL(imgSrc.value);
          }
          imgSrc.value = window.URL.createObjectURL(res.data);
        });
      }else {
        if(imgSrc.value!=null){
          window.URL.revokeObjectURL(imgSrc.value);
        }
        imgSrc.value = null;
      }
    }else {
      ElMessage({
        message: response.data.msg,
        type: 'error'
      });
    }
  });
}

function getRoleText(sign: number) {
  switch (sign) {
    case 0:
      return '普通用户';
    case 1:
      return '管理员';
    case 2:
      return '超级管理员';
    default:
      return '未知角色';
  }
}

// 多选框选中数据
function handleSelectionChange(selection:any[]) {
  ids.value = selection.map(item => item.intvId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加面试信息";
}

/** 修改按钮操作 */
function handleUpdate(row: any) {
  reset();
  const _intvId = row.intvId || ids.value
  getInterview(_intvId).then(response => {
    form.value = response.data.data;
    open.value = true;
    title.value = "修改面试信息";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["interviewRef"].validate((valid: boolean) => {
    if (valid) {
      if (form.value.intvId != null) {
        updateInterview(form.value).then(response => {
          if(response.data.code === 200){
            ElMessage({ type: 'success', message: '更新成功' })
            getList();
          }
          else {
            ElMessage({ type: 'error', message: response.data.msg })
          }
          open.value = false;
        });
      } else {
        addInterview(form.value).then(response => {
          if(response.data.code === 200){
            ElMessage({ type: 'success', message: '添加成功' })
            getList();
          }
          else {
            ElMessage({ type: 'error', message: response.data.msg })
          }
          open.value = false;
        });
      }
    }
  });
}


/** 删除按钮操作 */
function handleDelete(row:any) {
  const _intvIds = row.intvId || ids.value;
  ElMessageBox.alert('是否确认删除？', '提示', {
    confirmButtonText: '确定',
    callback: (action: string) => {
      if (action === 'confirm') {
        delInterview(_intvIds).then(response => {
          if(response.data.code === 200){
            ElMessage({ type: 'success', message: '删除成功' })
            getList();
          }
        })
      }
    }
  });
}

/** 导出按钮操作 */
// function handleExport() {
//   proxy.download('system/interview/export', {
//     ...queryParams.value
//   }, `interview_${new Date().getTime()}.xlsx`)
// }

getList();
</script>

<style scoped>
.custom-pagination {
  margin-top: 20px; /* 调整分页组件与表格的间距 */
  display: flex;
  justify-content: center; /* 居中对齐分页组件 */
}

.custom-pagination .el-pagination__total,
.custom-pagination .el-pagination__sizes,
.custom-pagination .el-pager li,
.custom-pagination .btn-prev,
.custom-pagination .btn-next,
.custom-pagination .el-pagination__jump {
  font-size: 14px; /* 调整字体大小 */
  color: #333; /* 调整文字颜色 */
}

.custom-pagination .el-pagination__sizes .el-input .el-input__inner {
  height: 30px; /* 调整输入框高度 */
  line-height: 30px; /* 调整输入框行高 */
}

.custom-pagination .el-pager li {
  min-width: 30px; /* 调整分页按钮最小宽度 */
  height: 30px; /* 调整分页按钮高度 */
  line-height: 30px; /* 调整分页按钮行高 */
  background-color: #f5f7fa; /* 调整分页按钮背景颜色 */
  border-radius: 4px; /* 调整分页按钮圆角 */
  margin: 0 5px; /* 调整分页按钮间距 */
}

.custom-pagination .el-pager li.active {
  background-color: #409eff; /* 调整激活分页按钮背景颜色 */
  color: #fff; /* 调整激活分页按钮文字颜色 */
}

.custom-pagination .btn-prev,
.custom-pagination .btn-next {
  height: 30px; /* 调整前后按钮高度 */
  line-height: 30px; /* 调整前后按钮行高 */
  background-color: #f5f7fa; /* 调整前后按钮背景颜色 */
  border-radius: 4px; /* 调整前后按钮圆角 */
  margin: 0 5px; /* 调整前后按钮间距 */
}

.custom-pagination .btn-prev:hover,
.custom-pagination .btn-next:hover {
  background-color: #409eff; /* 调整前后按钮悬停背景颜色 */
  color: #fff; /* 调整前后按钮悬停文字颜色 */
}

.item-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.item-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 16px;
  width: calc(100% - 16px);
  box-sizing: border-box;
}

.item-column {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.item-label {
  font-weight: bold;
}

.item-value {
  text-align: right;
}
</style>
